<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索页面定义属性和方法-->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"></SearchForm>

    <!-- 展示列表页面定义属性和方法-->
    <TableList :data="data" :total="total" :pagination="pagination" :dataLoading="dataLoading" :hover="hover"
      @onPageChange="onPageChange" @handleBulid="handleBulid" @handleEdit="handleEdit"
      @handleClickDelete="handleClickDelete" @handleForbidden="handleForbidden">
    </TableList>

    <!-- 展示弹窗 -->
    <DialogForm ref="formRef" :title="title" :data="formBaseData" :visible="visible" @handleClose="handleClose"
      @handleAdd="handleAdd" @handleEdit="handleEditForm"></DialogForm>

    <!-- 禁用弹层 -->
    <Forbidden :visible="dialogVisible" :text="operateText" @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"></Forbidden>

    <!-- 删除弹层 -->
    <Delete :visible="dialogDeleteVisible" :delete-text="operateText" @handle-delete="handleDelete"
      @handle-close="handleCloseDelete"></Delete>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { getProjectList, projectAdd, getProjectDetails, projectUpdate, projectDelete, projectStatus } from '@/api/serve'
//引入列表页组件
import TableList from './components/TableList.vue'
//导入搜索组件
import SearchForm from './components/SearchForm.vue';
//导入弹窗组件
import DialogForm from './components/DialogForm.vue';
//导入TDesign的消息插件
import { MessagePlugin } from 'tdesign-vue-next'
// 删除弹层
import Delete from '@/components/OperateDialog/index.vue'
// 禁用弹窗
import Forbidden from '@/components/Forbidden/index.vue'

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中状态
const hover = ref(false);
const visible = ref(false)//是否显示弹窗
const formRef = ref(null);
const title = ref('');
const formBaseData = ref({});

const typeStatus = ref(null) // 禁用启用
const statusText = ref('') // 启用禁用提示
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const operateText = ref('护理项目') // 要操作的内容提示
const typeId = ref('') // 设置删除id

//生命周期函数
onMounted(() => {
  getList()
})

//分页对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})

//调用分页查询护理项目信息接口
const getList = async () => {
  const result = await getProjectList(pagination.value)
  data.value = result.data.records
  total.value = Number(result.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  // console.log("=====================vue提供的分页对象val=======================");
  // console.log(val)
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageSize: 10,
    pageNum: 1
  }
  //重新查询列表
  getList();
}

//清空搜索框(单个清除)
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList();
}

//搜索按钮
const handleSearch = () => {
  getList();
}

//===========================================================新增======================================================================
//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  //1.设置弹窗标题为“新增”
  title.value = '新增'
  visible.value = true;
}

//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () => {
  visible.value = false;
}

//handleAdd新增数据点击事件
const handleAdd = async (val) => {
  //1.远程调用新增护理接口
  const result = await projectAdd(val)
  //2.判断调用是否成功，成功返回数据code===200
  if (result.code === 200) {
    //2.1成功，消息提示新增成功
    MessagePlugin.success('新增成功')
    //2.2重新分页查询数据
    getList()
    //2.3关闭弹窗
    handleClose()
    //2.4调用子组件handleClear重置(新增/编辑弹窗)表单数据
    formRef.value.handleClear()
  } else {
    //3.失败，提示失败消息
    MessagePlugin.error(result.msg)
  }
}

//===========================================================编辑===========================================================
//handleEdit编辑数据点击事件
const handleEdit = (val) => {
  //1.设置弹窗标题为“编辑”
  title.value = '编辑'
  //2.获取详情数据
  getDetails(val.id)
  //3.设置显示弹窗
  visible.value = true;
}

//调用远程调用根据id查询护理项目接口
const getDetails = async (id) => {
  const result = await getProjectDetails(id)
  if (result.code === 200) {
    formBaseData.value = result.data
  }
}

// 修改数据
const handleEditForm = async (val) => {
  //1.远程调用修改接口
  const result = await projectUpdate(val)
  //2.判断调用是否成功，成功返回数据code===200
  if (result.code === 200) {
    //2.1成功，消息提示新增成功
    MessagePlugin.success('编辑成功')
    //2.2重新分页查询数据
    getList()
    //2.3关闭弹窗
    handleClose()
    //2.4调用子组件handleClear重置(新增/编辑弹窗)表单数据
    formRef.value.handleClear()
  } else {
    //3.失败，提示失败消息
    MessagePlugin.error(result.msg)
  }
}

//===========================================================禁用/启用============================================================
// 禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub()
    statusText.value = '启用成功'
  }
}

// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList()
  }
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}

//===========================================================删除============================================================
// 确认删除
const handleDelete = async () => {
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList()
  }
}
// 点击删除
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// 点击删除关闭
const handleCloseDelete = () => {
  dialogDeleteVisible.value = false
}
</script>
